import React, { useEffect, useReducer } from 'react'

// 1. 创建一个组件的初始状态
const initState = {
    bannerList: [],
    proList: []
}

// 2. 创建修改 state 的事件
const reducer = (state, actions) => {
    switch (actions.type) {
        case 'change_banner_list':
            //    返回新的状态

            // 直接修改 state 可以显示但是，官方有说该写法是不规范的，因为
            // state 是一个只读的对象，你需要返回一个新的对象
            // state.bannerList = actions.payload
            return { ...state, bannerList: actions.payload }
        case 'change_pro_list':
            //    返回新的状态
            return { ...state, proList: actions.payload }
        default:
            return state
    }
}

export default function App() {

    /*
        参数 
        reducer：用于更新 state 的纯函数。参数为 state 和 action，返回值是更新后的 state。state 与 action 可以是任意合法值。
        initialArg：用于初始化 state 的任意值。初始值的计算逻辑取决于接下来的 init 参数。
        可选参数 init：用于计算初始值的函数。如果存在，使用 init(initialArg) 的执行结果作为初始值，否则使用 initialArg。
        返回值 
        useReducer 返回一个由两个值组成的数组：

        当前的 state。初次渲染时，它是 init(initialArg) 或 initialArg （如果没有 init 函数）。
        dispatch 函数。用于更新 state 并触发组件的重新渲染。

        react 中的 hooks 使用限制在函数式组件的最顶层作用域使用，或者在自定义
        hooks 中使用，其他地方一律无法使用 hooks 
    */

    const [state, dispatch] = useReducer(reducer, initState)

    useEffect(() => {
        fetch('http://121.89.205.189:3000/api/banner/list')
            .then(res => res.json())
            .then(res => {
                // console.log(res.data);
                // 将输入放在 state 中
                dispatch({
                    type: 'change_banner_list',
                    payload: res.data
                })
            })

        fetch('http://121.89.205.189:3000/api/pro/list')
            .then(res => res.json())
            .then(res => {
                // console.log(res.data);
                // 将输入放在 state 中
                dispatch({
                    type: 'change_pro_list',
                    payload: res.data
                })
            })
    }, [])

    const banner = state.bannerList.map(item => {
        return <img style={{ width: 100 }} key={item.bannerid} src={item.img} />
    })

    return (
        <div>
            {banner}

            <hr />
            <ol>
                {
                    state.proList.map(item => {
                        return <li key={item.proid}>{item.proname}</li>
                    })
                }
            </ol>
        </div>

    )

}
